<template>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>异常考勤处理</span>
        <el-button style="float: right;margin-right:15px" type="primary" @click="refresh">更新列表</el-button>
        
    </div>
     <!-- 用户信息列表 -->
    <div class="app-container">
      <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='员工ID' width="95">
          <template slot-scope="scope">
            {{scope.row.userId}}
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="110" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="异常类型" width="110" align="center">
          <template slot-scope="scope">
            {{scope.row.exceptionType}}
          </template>
        </el-table-column>
        <el-table-column label="维护原因" >
          <template slot-scope="scope">
            {{scope.row.maintenanceReason}}
          </template>
        </el-table-column>
        
        <el-table-column label="异常时间" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.exceptionTime}}
          </template>
        </el-table-column>
        <el-table-column label="申请时间" width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.askTime}}
          </template>
        </el-table-column>
        <el-table-column  label="审批" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,index)"  v-for="(item,index) in btn" :key="index" :type="item.status" size="small">{{item.msg}}</el-button>
            <!-- <el-button @click="handleClick(scope.row)" :type="btn.danger" size="small">拒绝</el-button> -->
          </template>
        </el-table-column>
        <!-- <el-table-column class-name="status-col" label="状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="截止时间" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{scope.row.display_time}}</span>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <div class="block" style="margin-top:20px;height:60px;">
        <el-pagination style="float:right" background layout="prev, pager, next" :total="100">
        </el-pagination>
      </div> -->
    </div>

    </el-card>
   
    
    
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      list: [],
      btn:[
        {
          status:"success",
          msg:"同意"
        },
        {
          status:"danger",
          msg:"拒绝"
        },
        
      ],
      listLoading: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
    };
  },
  created() {
    this.$axios
        .post(
          "http://localhost:8088/getAllMaintenances",
          qs.stringify({}),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          this.list = res.data.data
        })
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  mounted() {},
  methods: {
      addUser (){

      },
      refresh (){
        this.$axios
        .post(
          "http://localhost:8088/getAllMaintenances",
          qs.stringify({}),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          this.list = res.data.data
        })
      },
      handleClick (list,index){
        let status
        console.log(list)
        if(index ==0){
          status = 2
        }else{
          status = 3
        }
        this.$axios
        .post(
          "http://localhost:8088/maintenanceConfirm",
          qs.stringify({
            // date: this.date
            id: list.id,
            checkState:status,
            recordId:list.recordId
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if(status == 2){
            this.$notify({
              title: '成功',
              message: res.data.message,
              type: 'success'
            });
          }else if(status == 3){
            this.$notify.error({
              title: '已拒绝',
              message: "考勤维护成功，已拒绝申请！",
              type: 'err'
            });
          }
          //刷新列表
          this.$axios
          .post(
            "http://localhost:8088/getAllMaintenances",
            qs.stringify({}),
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(res => {
            console.log(res.data.data);
            this.list = res.data.data
          })


        })
      }
  }
};
</script>


<style lang="scss" scoped>
.text {
    font-size: 20px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
    .clearfix{
        span{
            font-size: 20px;
            line-height: 40px;
        }
    }
  .box-card {
   margin: 10px;
  }

  .app-container{
      padding: 0;
  }
  .block{
      float:right;
      margin: 0 20px;
      .demonstration{
          font-size: 16px;
      }
  }
</style>
